const { merge } = require('webpack-merge');
const { join, resolve } = require('path');

// 获取参数
const argv = require('yargs-parser')(process.argv.slice(2));
const _mode = argv.mode || 'development';
const _modeFlag = _mode === 'production';
const _mergeConfig = require(`./config/webpack.${_mode}.js`);
// console.log('_mode:', process.argv.slice(2));
// console.log('_mode:', argv);

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 从右向左
const cssLoders = [
    MiniCssExtractPlugin.loader,
    {
        loader: "css-loader",
        options: {
            importLoders: 1 // 指定是否需要第三方解析
        }
    },
    {
        loader: "postcss-loader",
    }
];

// 公共配置
const webpackBaseConfig = {
    entry: {
        app: resolve("src/index.tsx"),
    },
    output: {
        path: join(__dirname, './dist/assets'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)/,
                include: [resolve('src')],
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(.css|scss)$/,
                use: cssLoders
            },
            {
                test: /\.(png|jpg|jpeg|gif|eot|woff|woff2|ttf|svg|otf|webp)/,
                type: "asset"
            }
        ]
    },
    externals: {
        react: "react"
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx", ".jsx"]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: _modeFlag ? "styles/[name].[contenthash:8].css": "styles/[name].css",
            chunkFilename: _modeFlag ? "style/[id].[contenthash:8].css": "styles/[id].css",
            ignoreOrder: true,
        })
    ]
}

module.exports = merge(webpackBaseConfig, _mergeConfig);